jclass={
	initPage:function(){

        this.jChart = {}

        this.shengColum = [{field: 'nameType',title: '省份'},{field: 'carNum',title: '数量(辆)',align: 'center'}],
        this.shiColum = [{field: 'nameType',title: '地市'},{field: 'carNum',title: '数量(辆)',align: 'center'}],
        this.quColum = [{field: 'nameType',title: '区县'},{field: 'carNum',title: '数量(辆)',align: 'center'}],
        this.columnData = [{
                field: 'no',
                title: '序号',
                align: 'center',
                formatter: function (value, row, index) {
                    var pageSize = commonProvince.data.queryData.size;
                    var pageNumber = commonProvince.data.queryData.page;
                    return pageSize * (pageNumber - 1) + index + 1;
                }
            },
            {
                key: "vehicleNo",
                title: "车牌号码",
            },
            {
                key: "b",
                title: "车籍地",
            },
            {
                key: "transTypeCode",
                title: "行业类别",
            },
            {
                key: "exchangePlatform",
                title: "数据交换平台",
            },
            {
                key: "startTime",
                title: "跨域开始时间",
            },
            {
                key: "f",
                title: "跨域时长",
            },
            {
                key: "alarmSum",
                title: "跨域区间报警数",
            },
            {
                key: "endTime",
                title: "跨域结束时间",
            },
            {
                key: "owersName",
                title: "所属业户",
            },
            {
                key: "areaName",
                title: "所属地区",
            }
        ],
		
		// 声明全局变量
		this.data = {
            dqSelectObj: {
                "name": "陕西省",
                "value": [ 108.9608,34.26641]
            },
            mapZoom: 5,
            selectTab: 1,
            crossParams: {
                status: 'out',
                areaCode: '610000',
                transType: '1,2,3',
                type: '1'
            }
        };
        this.selectedValue()
        // this.getTableList();
        this.getCrossData();
        this.initMap();
        this.bindEvent();
	},
    initMap() {
        let that = this
        this.jChart = echarts.init(document.getElementById('map_main'));
        this.jChart.setOption({
            amap: {
                 maxPitch: 60,
                 pitch: 41, //45 俯仰角
                 viewMode: '3D',
                 zoom: 5,
                 expandZoomRange: true,
                 zooms: [3, 20],
                 mapStyle: 'amap://styles/darkblue', //地图主题
                 center: [110,33], //中心点
                 rotation: 0,  //顺时针旋转角度
                 resizeEnable: true,
            },
            animation: false,
            series: []
        });
        
        var map = this.jChart.getModel().getComponent('amap').getAMap();
        var layer = this.jChart.getModel().getComponent('amap').getLayer();

        AMap.event.addListener(map,'click',function(){
            console.log("clickmap")
        });

        // this.setMapData()

        //下面是确保高德地图渲染的时候，echarts同时也需要再次渲染一次，保持位置的同步
        layer.render = function() {
             // let series = myChart.getOption().seriesIndexes;
             // myChart.setOption({
             //     series: []
             // });

             // that.jChart.setOption({
             //     series: []
             // });

             // that.setMapData()
            // console.log('当前缩放级别：' + map.getZoom());
            // console.log('俯视视角：' + map.getPitch());
            // console.log('顺时针：' + map.getRotation());
        }
    },
    setMapData(data) {
        console.log(data)
        let data1 = (a) => {
            a.forEach(b => {
                if (this.data.crossParams.status === 'in') {
                    b.coords = [b.coords,this.data.dqSelectObj.value]
                } else {
                    b.coords = [this.data.dqSelectObj.value,b.coords]
                }
            })
            return a
        }
        let centerpos = [this.data.dqSelectObj]
        var series =   [
            {
                "name": "西安流出bai",
                "coordinateSystem": "amap",
                "type": "lines",
                "zlevel": 1,
                "effect": {
                    "show": true,
                    "period": 5,
                    "trailLength": 0.8,
                    "color": "#fff",
                    "symbolSize": 3
                },
                "lineStyle": {
                    "normal": {
                        "color": "#111",
                        "width": 0.1,
                        "curveness": 0.5
                    }
                },
                "data": data1(data)
            },
            {
                "name": "流入地点",
                "type": "effectScatter",
                "coordinateSystem": "amap",
                "zlevel": 2,
                "rippleEffect": {
                    "brushType": "stroke"
                },
                "label": {
                    "normal": {
                        "show": true,
                        "position": "bottom",
                        "formatter": "{b}"
                    }
                },
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                },
                "data": data
            },
            {
                "name": "流出地点",
                "type": "effectScatter",
                "coordinateSystem": "amap",
                "zlevel": 2,
                "rippleEffect": {
                    "brushType": "fill"
                },
                "label": {
                    "normal": {
                        "show": true,
                        "position": "bottom",
                        "formatter": "{b}"
                    }
                },
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                },
                "data": centerpos
            }
        ];
        var tooltip = {
            trigger: 'item',
            formatter:function(params, ticket, callback){
                if(params.seriesType=="effectScatter") {
                    return params.data.name+"";
                }else if(params.seriesType=="lines"){
                    let str = ''
                    if (params.data.child.length) {
                        params.data.child.forEach(item => {
                            switch(item.type) {
                                case '1':
                                    str += `班线客运:${item.value}<br />`;
                                    break;
                                case '2':
                                    str += `旅游包车:${item.value}<br />`;
                                    break;
                                case '3':
                                    str += `危险品运输:${item.value}`;
                                    break;
                            }
                        })
                    } else {
                        switch(params.data.type) {
                            case '1':
                                str = `班线客运:${params.data.carnum}`;
                                break;
                            case '2':
                                str = `旅游包车:${params.data.carnum}`;
                                break;
                            case '3':
                                str = `危险品运输:${params.data.carnum}`;
                                break;
                        }
                    }
                    return centerpos[0].name+"->"+params.data.name+"<br />"
                        +str+"<br />"
                        ;
                }else{
                    return params.name;
                }
            }
        };
        let that = this
        this.jChart.setOption({
            series: series,
            tooltip: tooltip,
            amap: {
                 maxPitch: 60,
                 pitch: 41, //45 俯仰角
                 viewMode: '3D',
                 zoom: that.data.mapZoom,
                 expandZoomRange: true,
                 zooms: [3, 20],
                 mapStyle: 'amap://styles/darkblue', //地图主题
                 center: that.data.dqSelectObj.value, //中心点
                 rotation: 0,  //顺时针旋转角度
                 resizeEnable: true,
            }
        },true);
    },
	bindEvent() {
        let that = this
        $('#datepickerTime').datePicker({
            format: 'YYYY-MM-DD HH:mm',
            isRange: true,
            hide: function (type) {
                // console.info(this.$input.eq(0).val(), this.$input.eq(1).val());
                // that.data.tableParams.handleBeginTime = this.$input.eq(0).val()
                // that.data.tableParams.handleEndTime = this.$input.eq(1).val()
            }
        });

        $("#resetClick").click(() => {
            $('.ju-select input').val("全部")
            $("select").prop("selectedIndex",0)
            // $("select").find("option[value='0']").attr("selected", true)
            $("#input_vehicle_no").val("")
            $(".item.rtable_input").find("input").val("")
            $("#datepickerTime input").val("")
            
        })

        $("#jcross_search").hide()
		$("#left_menu li .tab").click(function() {
            let index = $(this).index();
            $(this).addClass("active").parent().siblings("li").find(".tab").removeClass("active");
            $(this).siblings(".tab").removeClass("active");
            let type1 = $(this).data("typeone");
            if (type1 == '1') that.data.crossParams.type = '1'
            else if (type1 == '2') that.data.crossParams.type = '1,2'
            else if (type1 == '3') that.data.crossParams.type = '1,2,3'
            let type2 = $(this).data("typetwo")
            that.data.crossParams.status = type2
            that.data.selectTab = type1
            that.getSelectUlData(type1)

            if ($(this).data("table")) {
                that.getTableList()
                $("#table_contain").show()
                $("#map_contain").hide()
            } else {
                $("#table_contain").hide()
                $("#map_contain").show()
            }

            $("#jdq_ul").hide()
            $("#jdq_ul_two").hide()
        })
        // 地区选择
        $(document).click(function (event) {
            var x1 = $('.jcross-select'); // 设置目标区域
            // console.log(event)
            if (!x1.is(event.target) && x1.has(event.target).length === 0) {
                if (that.data.selectTab == '2') {
                    $("#jdq_ul").hide()
                } else {
                    $("#jdq_ul_two").hide()
                }
            }
        })
        $("#jselect_dqtext").click(function() {
            // $("#jdq_ul").toggle()

            if (that.data.selectTab == '2') {
                $("#jdq_ul").toggle()
            } else {
                $("#jdq_ul_two").toggle()
                $("#jdq_ul_province").show()
                $("#jdq_ul_city").hide()
                that.setdqSelectTwo()
            }
        })
        $(".sp-jtou").click(function() {
            if (that.data.selectTab == '2') {
                $("#jdq_ul").toggle()
            } else {
                $("#jdq_ul_two").toggle()
                $("#jdq_ul_province").show()
                $("#jdq_ul_city").hide()
                that.setdqSelectTwo()
            }
        })

        $("#btn_search").click(() => {
            this.getCrossData()
        })

        // 地区下拉框
        this.diquSelceted();
	},
    selectedValue:function(){
        let optionArr2=["全部","班车客运","旅游包车","危险品运输"];
        this.creatId("#hytype",optionArr2);
    },
    creatId:function(id,optionArr){
        $(id).html();
        var str="";
        $.each(optionArr,function (i) {
            str+="<option value='"+i+"'>"+optionArr[i]+"</option>"
        });
        $(id).html(str);
        $(id).comboSelect();
    },
    // 带市的地区下拉框
    setdqSelectTwo() {
        let code = '610000'
        jrequest.get("/api/area/listArea",{parentId: code}).then(res => {
            // console.log(res.data)
            let strhtml = ''
            res.data.forEach(item => {
                strhtml += `<li 
                    data-id=${item.id}
                    onmouseover="dqselectCity(this)">${item.name}</li>`
            })
            $("#jdq_ul_province").html(strhtml)
        })
    },
    // 地区下拉框
    getSelectUlData(dqType) {
        let code = ''
        switch(dqType) {
            case 1:
                $("#jcross_search").hide()
                this.data.mapZoom = 5
                break;
            case 2:
                $("#jcross_search").show()
                code = '610000'
                this.data.mapZoom = 7
                break;
            case 3:
                $("#jcross_search").show()
                code = '610100'
                this.data.mapZoom = 11
                break;
        }
        if (code) {
            jrequest.get("/api/area/listArea",{parentId: code}).then(res => {
                // console.log(res.data)
                let strhtml = ''
                res.data.forEach(item => {
                    strhtml += `<li 
                        data-id=${item.id} 
                        data-name=${item.name}
                        data-lnglat=${item.lngLat}
                        onclick="dqselect(this)">${item.name}</li>`
                })
                $("#jdq_ul").html(strhtml)
                $("#jselect_dqtext").text(res.data[0].name)

                this.data.dqSelectObj = {
                    name: res.data[0].name,
                    value: res.data[0].lngLat.split(',')
                }

                this.getCrossData()
            })
        } else {
            this.data.dqSelectObj = {
                name: "陕西省",
                value: [ 108.9608,34.26641]
            }
            this.getCrossData()
        }

    }, 
    // 处理接口数据给地图飞线
    getCrossData() {
        jrequest.get("/api/vehicles/getAreaMigrateBySX",this.data.crossParams).then(res => {
            if (!res.data) return
            $('#jtable_cross').bootstrapTable('destroy');
            res.data.forEach(item => {
                item.nameType = ((item) => {
                    let str = ''
                    switch(item.tranType) {
                        case '1':
                            str = `${item.name}【班线客运】`;
                            break;
                        case '2':
                            str = `${item.name}【旅游包车】`;
                            break;
                        case '3':
                            str = `${item.name}【危险品运输】`;
                            break;
                        default:
                            str = `${item.name}`;
                            break;
                    }
                    return str
                })(item)
            })
            if (this.data.selectTab == '1') {
                this.initChartsTable("jtable_cross",res.data,this.shengColum);
            } else if (this.data.selectTab == '2') {
                this.initChartsTable("jtable_cross",res.data,this.shiColum);
            } else if (this.data.selectTab == '3') {
                this.initChartsTable("jtable_cross",res.data,this.quColum);
            }


            // console.log(res.data)
            let data = res.data
            let obj = {}
            for(let item of data) {
                let ss = item.rails.split(',')
                item.rails = ss.map(item => Number(item))
                if(obj[item.code]) {
                    let arr
                    if (obj[item.code].constructor === Array) {
                        arr = obj[item.code]
                    } else {
                        arr = new Array(obj[item.code])
                    }
                    arr.push(item)
                    obj[item.code] = arr
                }else {
                    obj[item.code] = item
                }
            }

            let dataarr = []
            for (let index in obj) {
                if (obj[index].constructor === Array) {
                    let o = {child: []}
                    obj[index].forEach(a => {
                        let b = {}
                        b.type = a.tranType
                        b.value = a.carNum
                        o.child.push(b)
                    })
                    o.coords = obj[index][0].rails
                    o.value = obj[index][0].rails
                    o.name = obj[index][0].name
                    dataarr.push(o)
                } else {
                    let oi = {}
                    oi.child = []
                    oi.coords = obj[index].rails
                    oi.value = obj[index].rails
                    oi.name = obj[index].name
                    oi.type = obj[index].tranType
                    oi.carnum = obj[index].carNum
                    dataarr.push(oi)
                }
                
            }
            // console.log(dataarr)
            this.setMapData(dataarr)
        })
    },
	getTableList() {
        // jrequest.get("/api/vehicle/provinceOfOut",{}).then(res => {
            $('#jtable_crosscar').bootstrapTable('destroy');
            this.initChartsTable("jtable_crosscar",[],this.columnData);
        // })
    },
    initChartsTable(id,data,columns) {
        $("#" + id).bootstrapTable({
              method: 'get',
              cache: false,
              height: 400,
              pagination: false,
              // pageSize: 10,
              // pageNumber:1,
              showColumns: false,
              striped: true,
              columns: columns,
              data :data,
              onPageChange: function (size, number) {
                
              },
              formatNoMatches: function(){
                return '暂无数据';
              }
        });
    },
    /**
     * 请求地区数据
     * */
    diquSelceted: function() {
        jrequest.get("/api/assessMent/selectByArea",{}).then(res => {
            let data = res.data
            data[0].code = 1;
            $.each(data[0].cityAreaVOS, function(i, dom) {
                data[0].cityAreaVOS[i].code = 2;
                $.each(data[0].cityAreaVOS[i].cityAreaVOS, function(j, dom) {
                    data[0].cityAreaVOS[i].cityAreaVOS[j].code = 3;
                })
            })
            this.creatMainRido("alarm_qrm_main", data, "cityAreaVOS", "code");
        })
    },
    /**
     * 下拉框
     * */
    creatMainRido: function(id, attr, child, jibie) {
        $(id).html("");
        var sttrdiv = "";
        for(var i = 0; i < 3; i++) {
            sttrdiv += "<div class='qrm-border" + (i + 1) + "' style='display:none'>" +
                "<ul class='qrm-lev-" + (i + 1) + " qrm-lev' id='qrm-border1'>" +
                "</ul>" +
                "</div>"
        };
        $(".qrm-main").html(sttrdiv);
        var str = "";
        $("#qrm-border1").html("");
        var forTree = function(o) {
            for(var i = 0; i < o.length; i++) {
                var urlstr = "";
                try {
                    urlstr = "<li><span data-id='" + o[i]["id"] + "'>" + o[i]["name"] + "</span><i class='qrm-arrow-right'></i><ul class='li-zi-" + o[i][jibie] + "' style='display: none'>";
                    str += urlstr;
                    if(o[i][child] != null) {
                        forTree(o[i][child]);
                    }
                    str += "</ul>";
                } catch(e) {}
            }
            return str;
        };
        $("#qrm-border1").html(forTree(attr));
    },
}

$(function(){
	jclass.initPage();

});
function dqselect(obj) {
    console.log($(obj).data('name'))
    $("#jselect_dqtext").text($(obj).data('name'))
    jclass.data.crossParams.areaCode = $(obj).data('id')
    // let a = $(obj).data('lnglat').split(',')
    jclass.data.dqSelectObj = {
        name: $(obj).data('name'),
        value: $(obj).data('lnglat').split(',')
    }
    $("#jdq_ul").hide()
    $("#jdq_ul_two").hide()
}
function dqselectCity(obj) {
    jrequest.get("/api/area/listArea",{parentId: $(obj).data('id')}).then(res => {
        // console.log(res.data)
        let strhtml = ''
        res.data.forEach(item => {
            strhtml += `<li 
                data-id=${item.id} 
                data-name=${item.name}
                data-lnglat=${item.lngLat}
                onclick="dqselect(this)">${item.name}</li>`
        })
        $("#jdq_ul_city").show()
        $("#jdq_ul_city").html(strhtml)
    })
}



